<template>
	<view class="video_bigBox" >
		<view class="video_all">
			<view class="video_list" v-for="item,index in videoArray">
				<!-- item.note.images[0].u -->
				<!-- 推广 -->
				<view class="block_box" v-if="item.activity">
					<!-- :style="`width:${item.activity.image_w/2}rpx;height:${item.activity.image_h/2}rpx;`" -->
					<image class="list_img" :src="`${item.activity.image}`"
						:style="`height:${item.activity.image_h/2}rpx;`" mode="widthFix"></image>
					<view class="list_content">
						<view class="con_title">{{item.activity.name}}</view>
						<!-- username -->
						<view class="user_info">
							<view class="info_name">
								<image class="img" :src="`${item.activity.author.p}`" mode="scaleToFill"></image>
								<view class="name">{{item.activity.author.n}}</view>
							</view>
							<view class="info_icon">
								<image class="icon_img" :src="`${item.activity.action_icon}`" mode="widthFix"></image>
								<view class="icon_text">{{item.activity.action_title}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 广告 -->
				<view class="block_box" v-if="item.dsp">
					<!-- :style="`width:${item.dsp.img_w/2}rpx;height:${item.dsp.img_h/2}rpx;`" -->
					<image class="list_img" :src="`${item.dsp.i}`" :style="`height:${item.dsp.img_h/2}rpx;`"
						mode="widthFix"></image>
					<!--  -->
					<view class="list_content">
						<view class="con_title">{{item.dsp.t}}</view>
						<!-- username -->
						<view class="user_info">
							<view class="info_name">
								<image class="img" :src="`${item.dsp.user.user_photo}`" mode="scaleToFill"></image>
								<view class="name">{{item.dsp.user.nick}}</view>
							</view>
							<view class="info_icon">
								<uni-icons type="heart" size="18" color="#cccccc;"></uni-icons>
								<!-- <image class="icon_img" :src="`${item.dsp.action_icon}`" mode="widthFix"></image> -->
								<view class="icon_text" style="color:#9A9A9A;">{{item.dsp.like_count}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 内容 -->
				<view class="block_box" v-if="item.note" >
					<!-- :style="`height:${item.r.pw >600?'600':'item.r.pw'}rpx;`"  -->
					<!-- :style="`width:${item.note.image_w/2}px;height:${item.note.image_h/2}px;`" -->
					<image class="list_img" @tap="jumpDetail(item.note.id)" :src="`${item.note.image_u}`" mode="widthFix"></image>
					<view class="list_content">
						<view v-if="item.note.straight_text" class="clock_in">
							<uni-icons type="calendar" size="18" color="#cccccc;"></uni-icons>
							<view class="con_txt">
								{{item.note.straight_text}}
							</view>
						</view>
						<view class="con_title">
							{{item.note.title}}
						</view>
						<!-- username -->
						<view class="user_info">
							<view class="info_name">
								<image class="img" :src="`${item.note.author.p}`" mode="scaleToFill"></image>
								<view class="name">{{item.note.author.n}}</view>
							</view>
							<view class="info_icon">
								<uni-icons type="heart" size="18" color="#cccccc;"></uni-icons>
								<!-- <image class="icon_img" :src="`${item.note.action_icon}`" mode="widthFix"></image> -->
								<view class="icon_text" style="color:#9A9A9A;">{{item.note.like_count}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 第二类 -->
		<view class="item" id="loading"></view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		name: "compVideo",
		props: ["videoArray"],
		data() {
			return {
				// video_array:[],
				page: 0,
			};
		},
		created() {

		},
		mounted() {
			let io = new IntersectionObserver(this.loadList, {});
			let viewList = document.getElementById('loading');
			io.observe(viewList);
		},
		methods: {
			...mapMutations(["savePaIndex"]),
			jumpDetail(k) {
				uni.navigateTo({
					url: `../../pages/childPage/noteDetail/noteDetail?id=${k}`
				});
			},
			loadList(status) {
				status = status[0];
				let isShow = status.isIntersecting;
				if (isShow) {
					let tempIndex = this.page++;
					console.log('this.page ++', tempIndex);
					this.savePaIndex(tempIndex)
				} else {
					console.log('this.page 没有触底')
				}
			}
		}
	}
</script>

<style lang="scss">
	.video_bigBox {
		width: 100%;

		.video_all {
			width: 96%;
			// height: auto;
			// column-span:none !important;
			margin: 0 auto;
			column-count: 2;
			column-gap: 2%;
			// column-fill: auto;



			.video_list {
				width: 100%;
				overflow: hidden;
				border-radius: 20rpx;
				display: inline-block;

				.block_box {
					width: 100%;
					overflow: hidden;
					border-radius: 20rpx;
					display: inline-block;

					.list_img {
						width: 100%;
					}

					.list_content {
						width: 96%;
						margin: 0 auto;

						.clock_in {
							font-size: 20rpx;
							color: #9A9A9A;
							display: flex;
							align-items: center;
						}

						.con_title {
							font-size: 28rpx;
							font-weight: 600;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							padding: 10rpx 0 0;
						}

						.user_info {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 18rpx 0;

							.info_name {
								display: flex;
								align-items: center;

								.img {
									width: 38rpx;
									height: 38rpx;
									border-radius: 50%;
								}

								.name {
									margin-left: 8rpx;
									font-size: 24rpx;
									color: #9A9A9A;
									font-weight: 500;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
							}

							.info_icon {
								display: flex;
								align-items: center;

								.icon_img {
									width: 25rpx;
									height: 35rpx;
									// border-radius: 50%;
								}

								.icon_text {
									margin-left: 8rpx;
									font-size: 26rpx;
								}
							}
						}
					}
				}

			}

		}
	}
</style>
